<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path;
%>
<html>
  <head>
    <title></title>
    <script>
    	var getImContentInterval; // 获取聊天信息的定时器

    	function getImContent(){
			$.ajax({
				type:"POST",
				data:$("#imForm").serialize(),
				url:  "<%=basePath %>/getImContent.action",
				cache:false,
				async: false,
				success:function (data){
						var arr=data.split("|");
						var newhtml=$("#msgDialog").val()+arr[0];
						var theNewMsgSheetId=arr[1];
						var isOnline=arr[2];
						if(data.indexOf("|")==-1){
							isOnline=arr[0];
							arr[0]="";
						}
						if(arr[0]!=""){
							$("#msgDialog").val(newhtml);
							document.getElementById('msgDialog').scrollTop = document.getElementById('msgDialog').scrollHeight;
						}
						if(arr[3]!=""){
							$("#imAboutTopic").html(arr[3]);
						}
						if(isOnline=="true"){
							$("#imUserStatus").html("在线");
						}else{
							$("#imUserStatus").html("离线");
						}
				}
			});
		}
		
		function sendMsg(){
			if($("#imContent").val()==""){
				alert("发送的内容不能为空！");
				$("#imContent").val()=="";
				return;
			}
			$.ajax({
				type:"POST",
				data:$("#imForm").serialize(),
				cache:false,
				url:"${pageContext.request.contextPath}/cts/sendMsg.action",
				success:function(data){
						var newhtml=$("#msgDialog").val()+data;
						$("#msgDialog").val(newhtml);
						$("#imContent").val("");
						document.getElementById('msgDialog').scrollTop = document.getElementById('msgDialog').scrollHeight;
						//initTheNearest();
						$("#aboutSheet").val(0);
				}
			});
		}
		$(function(){
			checkMsg();
			document.getElementById('msgDialog').scrollTop = document.getElementById('msgDialog').scrollHeight;
			getImContentInterval=setInterval(getImContent,3000);
			getSenderInfo();//显示对方信息
			
			var imAboutTopic_url="<s:property value="#request.imAboutTopic_url"/>";
			var imAboutTopic_content="<s:property value="#request.imAboutTopic_content"/>";
			var imAboutTopic="<a style='color:#BA3027' href=\"javascript:"+imAboutTopic_url+"\">"+imAboutTopic_content+"</a>";
			$("#imAboutTopic").html(imAboutTopic);
			
		});
		
		function cleanImContentInterval(){
			clearInterval(getImContentInterval);
		}
		
		function getImContentHistory(pageNumber){
			$.ajax({
				type:"POST",
				data:"uid="+$("#imForm").find("#uid").val()+"&pageNumberIm="+pageNumber+"&pageSizeIm=15"+"&searchContent="+$("#searchContent").val(),
				cache:false,
				url:"${pageContext.request.contextPath}/cts/getImContentHistory.action",
				success:function(data){
					changeImInfoBg("a_imInfo2");
					$("#imInfoTd").html(data);
					document.getElementById('historyDiv').scrollTop = document.getElementById('historyDiv').scrollHeight;
					if($("#searchContent").val()!=""){
						document.getElementById('searchHistoryDiv').style.display="block";
					}
					if($("#historyDiv").html().indexOf(":")==-1){
						$("#historyTool").hide();
					}
				}
			});
		}
		
		function getSenderInfo(){
			changeImInfoBg("a_imInfo1");
			var senderInfoDivHtml=$("#senderInfoDiv").html();
			$("#imInfoTd").html(senderInfoDivHtml);
		}
		
		
		function clearMsgContent(){
			$("#msgDialog").val("");
		}
		
		
		function changeImInfoBg(id){
			$("li[id*='a_imInfo']").each(function(){
				if($(this).attr("id")==id){
					$("#"+id).removeClass("a_unselected").addClass("a_selected");
				}else{
					$(this).removeClass("a_selected").addClass("a_unselected");
				}
			});
			
		}
		
		
	
	
	
	
	
	function handleEnter_imSend(event) {
		if (event.keyCode == 13) { //回车
			sendMsg();
		}
	}
    </script>
  </head>
  
  <body>
	<form id="imForm" action="" method="post">
		<input id="workId" name="workId" type="hidden" value='<s:property value="#request.workId"/>' />
		<input id="uid" name="uid" type="hidden" value='<s:property value="#request.sender.id" />'/>
		<input id="aboutSheet" name="aboutSheet" type="hidden" value='<s:property value="#request.aboutSheet" />' / >
			<div style="float:left;width:350px;vertical-align: top;">
				<table style="font-size:12px;" cellpadding="1" cellspacing="0" border="0" width="90%" align="center">
					<tr>
						<td height="50px">
							<s:if test="null != #request.sender.headPath">
								<img src="${pageContext.request.contextPath}/<s:property value="#request.sender.headPath"/>" class="user_head" height="40px" width="40px" />
							</s:if>
							<s:else>
								<img src="/m68/pf/images/man.GIF" height="40px" width="40px" />
							</s:else>
							正在与 <s:property value="#request.sender.userName" /> 对话 (<span id="imUserStatus"></span>)
						</td>
					</tr>
					<tr>
						<td id="showContentTd">
							<textarea id="msgDialog" readonly="readonly" style="width:98%;height:200px;resize:none;font-size:12px;" ><s:property value="#request.imContent"/></textarea>
						</td>
					</tr>
					<tr>
						<td>
							<hr style="width:50%" />
						</td>
					</tr>
					<tr>
						<td>
							<textarea id="imContent" name="msgContent" style="width:98%;height:75px;resize:none;font-size:12px;" onkeypress="handleEnter_imSend(event)"></textarea>
						</td>
					</tr>
					<tr>
						<td align="right">
							<div id="imAboutTopic" style="float:left"></div>
							<input type="button" value="清屏" class="im_button_default2" onclick="clearMsgContent();"/>&nbsp;&nbsp;
							<input type="button" value="发送" class="im_button_default2" onclick="sendMsg();"/>
						</td>
					</tr>
				</table>
			</div>	
    </form>
    <form id="imInfoForm" action="${pageContext.request.contextPath}/cts/getImContentHistory.action" onsubmit="return false;" method="post">
    	<div style="float:left;width:270px;height:350px;font-size:12px">
			<table cellpadding="0" cellspacing="0" border="0" width="100%" align="center" style="table-layout: fixed;">
					<tr>
						<td height="50px" style="vertical-align: bottom;font-size: 12px;">
							<ul>
								<li id="a_imInfo1" onclick="getSenderInfo();" class="a_unselected">TA的个人资料</li>
								<li id="a_imInfo2" onclick="getImContentHistory(1);" class="a_unselected">聊天记录</li>
								<li class="a_unselected">&nbsp;</li>
							</ul>
						</td>
					</tr>
					<tr>
						<td id="imInfoTd" height="305px" style="font-size:12px;padding-top:10px;border-left:1px solid #7F9DB9;border-right:1px solid #7F9DB9;border-bottom:1px solid #7F9DB9;vertical-align: top;">
						</td>
					</tr>
			</table>
		</div>
    </form>

    <!-- 对方的信息 -->
    <div id="senderInfoDiv" style="display:none;">
 	<div style="display:block;height:270px;width:100%;">
 		
	</div>
	</div>
	<!-- 对方的信息 -->
	
	
  </body>
</html>
